<template>
	<view v-if="pageData && pageData.list" :style="{backgroundColor:pageData.bgColor,padding:`0 ${pageData.margin*2}rpx`}">
		<!-- 单图 -->
		<view v-if="pageData.list.length==1&&pageData.list[0].img" class="p-re">
			<image :src="$imgUrls(pageData.list[0].img)" mode="widthFix" :class="{'shadow':pageData.shadow==1}"
				:style="{borderRadius:`${pageData.radius*2}rpx`}"></image>
			<view v-for="(item,index) in pageData.list[0].area" :key="index" class="p-ab" @click="$banerGo(item)"
            	:style="{width:`${item.w*2}rpx`,height:`${item.h*2}rpx`,left:`${item.x*2}rpx`,top:`${item.y*2}rpx`}"></view>
		</view>
		<!-- 轮播 -->
		<view v-if="pageData.list.length>1">
			<swiper :style="{ height }" indicator-dots indicator-color="#fff" :indicator-active-color="color" autoplay :interval="3000">
				<swiper-item v-for="(item,index) in pageData.list" :key="index" class="p-re">
					<image :src="$imgUrls(item.img)" mode="aspectFill" class="wh" @load="handleLoad($event,index)"
						:class="{'shadow':pageData.shadow==1}" :style="{borderRadius:`${pageData.radius*2}rpx`}"></image>
					<view v-for="(itm,idx) in item.area" :key="idx" class="p-ab" @click="$banerGo(itm)"
						:style="{width:`${itm.w*2}rpx`,height:`${itm.h*2}rpx`,left:`${itm.x*2}rpx`,top:`${itm.y*2}rpx`}"></view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name:'hotZone',
		props:['pageData'],
		data() {
			return {
				height: ''
			}
		},
		computed: {
			...mapState(['color'])
		},
		methods: {
			handleLoad(e,index){
				if(!index){
					const { width, height } = e.detail
					this.height = 750/(width/height) + 'rpx'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.shadow {
	box-shadow: 0 2px 4px rgba(0,0,0,.06);
}
</style>